<template>
  <div class="login-container">

    <div class="logo">
    </div>

    <div class="form">

      <el-card shadow="shadow" class="login-card">
        <h2>登录</h2>

        <!-- label-position label位置  rules 表单验证规则,需要对应prop字段  -->
        <el-form label-position="top" label-width="80px" :model="loginForm" :rules="loginRules"  ref="form" >
          <el-form-item  label="账号" prop="mobile">
            <el-input  v-model="loginForm.mobile" placeholder="请输入手机号"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password" placeholder="请输入密码"></el-input>

          </el-form-item>

          <el-form-item prop="isAgree">
            <el-checkbox v-model="loginForm.isAgree">
              用户平台使用协议
            </el-checkbox>
          </el-form-item>

          <el-form-item>
            <el-button @click="login" style="width:290px" type="primary">登录</el-button>
          </el-form-item>

        </el-form>
      </el-card>

    </div>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  data() {
    return {
      // 登录表单
      loginForm: {
        // 做环境判断,开发环境直接显示账号密码
        mobile: process.env.NODE_ENV === 'development' ? '13800000002' :'',
        password:process.env.NODE_ENV === 'development' ? 'hm#qd@23!' :'' ,
        isAgree: process.env.NODE_ENV === 'development' ? true : false
      },
      // 校验规则 这里不写入方便后续代码编写
      loginRules: {
        mobile: [{ required :true,message:'请输入手机号',trigger:'blur' },
        // 简单的正则验证
      {pattern:/^1[3-9]\d{9}/,message:'手机号格式不正确',trigger:'blur'}],
        password: [{required: true,message:'请输入密码',trigger:'blur'},{min:6,max:16,message:'密码长度大于6位小于16位',trigger:'blur'}],

        // 自定校验 rule,检验规则 value,校验的值 callback 回调函数(校验信息)
        isAgree:[{validator:(rule,value,callback) => value ? callback() :callback(new Error('必须勾选用户协议'))}]
      }
    }
  },
  methods:{
    // 登录方法
      login(){
        // 获取表单调用校验方法 validate 对整个表单进行校验的方法,可传递一个带参数的回调函数判断校验 
        this.$refs.form.validate(async (isOk) => {if(isOk){
          // 校验通过,调用
          await this.$store.dispatch('user/login',this.loginForm)
          //请求通过跳转
          this.$router.push('/')
        } })
        
      }
  }
}
</script>

<style lang="scss">
// el标签的样式,只能在不添加scoped的情况下使用

// form的label 
// 加上外部标签套用避免污染全局el样式
.login-card {
  .el-form--label-top .el-form-item__label {
    padding: 0;
  }
}
</style>

<style lang="scss" scoped>
.login-container {
  display: flex;
  justify-content: space-between;

  .logo {
    flex: 3;
    width: 100%;
    height: 100vh;
    // 注意在style中如果必须使用官方配置的'~@'方法才能获取到地址
    // 注意backgroun-image 不能使用后接no-repeat这种语法
    background: url('~@/assets/common/login_back.png') center no-repeat;
    //使背景图片完全覆盖容器，同时保持图片的纵横比。如果图片的纵横比与容器的纵横比不同，图片可能会被裁剪
    background-size: cover;
    // 保持图片纵横比
    // background-size: contain;
    border-radius: 0 60px 60px 0;
  }

  .form {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;

    // card
    .login-card {
      border: 0;
      width: 350px;
      padding: 10px;

    }


  }

}
</style>
